<template>
	<view class="container">
		<!-- 自定义头部 -->
		<BhTitle titleText="支付结果" :showRetIcon="false"></BhTitle>
		<view style="align-items: center;
    display: flex;
    flex-direction: column;
    padding-top: 120rpx;">
			<image class="pay-img" v-if="paySuc" style="pay-img" src="@/static/images/member/pay_suc.svg"></image>
			<image class="pay-img" v-if="payFail" style="pay-img" src="@/static/images/member/pay_fail.svg"></image>
			<image class="pay-img" v-if="payIng || payUnknow" style="pay-img" src="@/static/images/member/pay_ing.svg"></image>
			<view class="pay-desc" >{{orderDto.tradeStateDesc ? orderDto.tradeStateDesc : '无效订单'}}</view>
			<view class="pay-money"><text class="pay-money-unit">¥</text><text>{{orderDto.total ? orderDto.total : ''}}</text></view>
			<view class="pay-vip-desc">{{paySuc ? '恭喜您成为我们的VIP会员！' : '恭喜您成为我们的'}}</view>
			<view class="pay-return" @click="navToPage('/pages/home/home')">回首页</view>
		</view>
	</view>
</template>

<script>
	import {
		Api
	} from '../../api/api';
	import {
		Dict
	} from '../../components/custom_views/dict';
	import {
		commonMixin
	} from '../../components/custom_views/mixin';
	import BhTitle from '../../components/custom_views/bh-title.vue'

	import {
		CustomDate
	} from '../../components/custom_views/custom_date'
import check_utils from '../../components/custom_views/check_utils';
import { CustomDict } from '../../components/custom_views/custom_dict';
import { MemberUtils } from '../utils/member_utils';

	export default {
		components: {
			BhTitle
		},
		mixins: [commonMixin],
		data() {
			return {
				sessionDto: this.$store.state.sessionDto,
				orderDto:{
					outTradeNo: '',
					total: 0,
					tradeState: 'USERPAYING',
					tradeStateDesc: '交易查询中',
					successTime: ''
				},
			}
		},
		computed: {
			paySuc(){
				return this.orderDto.tradeState == 'SUCCESS'
			},
			payFail(){
				return this.orderDto.tradeState == 'PAYERROR'
			},
			payIng(){
				return this.orderDto.tradeState == 'USERPAYING'
			},
			payUnknow(){
				console.log('orderTradeState的值', this.orderDto.tradeState)
				return this.orderDto.tradeState == '' || this.orderDto.tradeState=='INIT' ||
				this.orderDto.tradeState == null
			}
		},

		// 页面周期函数--监听页面加载
		onLoad(options) {
			console.log('页面参数', options)
			let that = this
			Api.UserApi.jsapiOrderQuery(that,{'outTradeNo':options.outTradeNo},(res)=>{
				if(res.code == 200){
					that.orderDto = res.data
					if(CustomDict.TradeStateEnum.SUCCESS.value == that.orderDto.tradeState){
						// 订单支付成功，更新会员标识到store中
						const sessionDto = that.$store.state.sessionDto
						sessionDto.userDto.memberLevel = Dict.MemberLevelEnum.Ordinary.value
						const memberExpireDate = MemberUtils.getMemberExpireTime(that.orderDto.successTime, 3)
						sessionDto.userDto.memberExpireDate = memberExpireDate
						that.$store.commit('updateSessionDto', sessionDto)
					}
				}else{
					that.orderDto.tradeStateDesc = '交易查询失败'
					// 支付中
					that.orderDto.tradeState = 'USERPAYING'
				}
			},true)
		},
		methods: {
			
			
		},
		watch: {},
		onPullDownRefresh() {
		},

		// 页面周期函数--监听页面初次渲染完成
		onReady() {},
		// 页面周期函数--监听页面显示(not-nvue)
		onShow() {},
		// 页面周期函数--监听页面隐藏
		onHide() {},
		// 页面周期函数--监听页面卸载
		onUnload() {},
		// 页面处理函数--监听用户下拉动作
		// onPullDownRefresh() { uni.stopPullDownRefresh(); },
		// 页面处理函数--监听用户上拉触底
		// onReachBottom() {},
		// 页面处理函数--监听页面滚动(not-nvue)
		// onPageScroll(event) {},
		// 页面处理函数--用户点击右上角分享
		// onShareAppMessage(options) {},
	}
</script>

<style scoped lang="scss">
	@import url(../../static/css/base.css);

	page {
		height: 100vh;
	}

	.container {
		background-color: #F5F9FA;
		width: 100%;
		height: 100vh;
	}

	button::after {
		content: '';
		border: none;
	}
	.pay-img{
		width: 300rpx;
		height: 300rpx;
		/* color: red; */
		margin-bottom: 32rpx;
	}
	.pay-desc{
		color: #333;
		margin-bottom: 16rpx;
	}
	.pay-money{
		font-size: 48rpx;
		margin-bottom: 16rpx;
		.pay-money-unit{
			color: #F87147;
			font-size: 32rpx;
			padding-right: 10rpx;
		}
	}
	.pay-vip-desc{
		
	}
	.pay-return{
		margin-top: 28rpx;
		width: 612rpx;
		// height: 112rpx;
		border-radius: 48px;
			
		background: #F8D247;
		margin: auto;
		margin-top: 64rpx;
		text-align: center;
		align-items: center;
		padding-top: 32rpx;
		padding-bottom: 32rpx;
			
		font-size: 32rpx;
		font-weight: 600;
			
		color: rgba(0, 0, 0, 0.85);
	}
	

</style>